<template>
    <div style="margin-bottom:56px">
        <v-toolbar dark color="primary">
            <v-toolbar-title>社区平台</v-toolbar-title>
        </v-toolbar>
        <v-carousel style="height:250px">
            <v-carousel-item
            v-for="(item,i) in pics"
            :key="i"
            :src="item.src"
            ></v-carousel-item>
        </v-carousel>
        <div style="background:white">
            <v-layout wrap justify-center align-center flat>
            <v-flex row v-for="(value,index) in funcs" v-bind:key=index text-xs-center xs4 style="margin-top:50px">
                <v-layout row wrap>
                <v-flex column justify-center align-center>
                    <v-btn color="primary" flat style="margin-bottom:0" @click="linkTo(value.link)">
                        <v-icon x-large style="padding-bottom:10px">{{value.icon}}</v-icon>
                    </v-btn>
                    <h6>{{value.title}}</h6>
                </v-flex>
                </v-layout>
            </v-flex>
            </v-layout>
        </div>
        <v-layout row>
            <v-flex xs12 sm6 offset-sm3>
            <v-card>
                <v-list two-line>
                <v-list subheader style="padding:0;margin-top:20px">
                    <v-icon color="primary">keyboard_arrow_right</v-icon>
                    <span style="font-size: 20px;color: primary">社区公告</span>
                    <v-btn flat style="margin: 0;float: right;" @click="linkTo('home/announcements')">
                        <span>更多 >></span>
                    </v-btn>
                </v-list>
                <v-divider></v-divider>
                <template v-for="(item, index) in announcements">
                    <v-list-tile :key="index" avatar ripple @click="$router.push('/home/'+item.announcementId+'/announcement')">
                    <v-list-tile-content>
                        <v-list-tile-title class="text--primary">{{ item.announcementTitle }}</v-list-tile-title>
                        <v-list-tile-sub-title>{{ item.announcementContent }}</v-list-tile-sub-title>
                    </v-list-tile-content>
                    </v-list-tile>
                    <v-divider v-if="index + 1 < announcements.length" :key="`divider-${index}`"></v-divider>
                </template>
                </v-list>
            </v-card>
            </v-flex>
        </v-layout>
    </div>
</template>

<script>

export default {
    name:'home',
    data(){
        return{
            pics: [
                {src:'http://ppt.downhot.com/d/file/p/2014/08/05/cb5322240543dabe9401fd166a1a6cfc.png'},
                {src:'http://img1.3lian.com/2015/w1/76/d/81.jpg'},
                {src:'http://pic1.16pic.com/00/11/69/16pic_1169706_b.jpg'}
            ],
            funcs:[
                {icon:'people',title:'邻里HI圈',link:''},
                {icon:'shop',title:'跳蚤市场',link:'flea-market'},
                {icon:'fastfood',title:'菜品交换',link:'dishes'},
                {icon:'shopping_basket',title:'小区团购',link:'purchases'},
                {icon:'image',title:'社区画报',link:'community-pictorial'},
                {icon:'cloud',title:'周边服务',link:'peripheral-services'}
            ],
            announcements: [
                { announcementId:'1',announcementTitle: '停水通知',announcementContent: "信息学部各用户：因配合信息学部专用中心配电室一回供电电源（茶绘线）改迁后的接驳工作，定于2018年5月31日（周四）及6月5日（周二）上午6时至7时进行倒闸操作。届时信息学部将短时停电、停水，请各用户做好停电、停水准备，由此带来的不便，敬请谅解。" },
                { announcementId:'2',announcementTitle: '停水通知',announcementContent: "信息学部各用户：因配合信息学部专用中心配电室一回供电电源（茶绘线）改迁后的接驳工作，定于2018年5月31日（周四）及6月5日（周二）上午6时至7时进行倒闸操作。届时信息学部将短时停电、停水，请各用户做好停电、停水准备，由此带来的不便，敬请谅解。" },
                { announcementId:'3',announcementTitle: '停水通知',announcementContent: "信息学部各用户：因配合信息学部专用中心配电室一回供电电源（茶绘线）改迁后的接驳工作，定于2018年5月31日（周四）及6月5日（周二）上午6时至7时进行倒闸操作。届时信息学部将短时停电、停水，请各用户做好停电、停水准备，由此带来的不便，敬请谅解。" },
                { announcementId:'4',announcementTitle: '停水通知',announcementContent: "信息学部各用户：因配合信息学部专用中心配电室一回供电电源（茶绘线）改迁后的接驳工作，定于2018年5月31日（周四）及6月5日（周二）上午6时至7时进行倒闸操作。届时信息学部将短时停电、停水，请各用户做好停电、停水准备，由此带来的不便，敬请谅解。" },
                { announcementId:'5',announcementTitle: '停水通知',announcementContent: "信息学部各用户：因配合信息学部专用中心配电室一回供电电源（茶绘线）改迁后的接驳工作，定于2018年5月31日（周四）及6月5日（周二）上午6时至7时进行倒闸操作。届时信息学部将短时停电、停水，请各用户做好停电、停水准备，由此带来的不便，敬请谅解。" },
            ]
        }
    },
    methods:{
        linkTo(link){
            this.$router.push(link)
        },
        getAnnouncements(){
            this.$axios({
                method:'get',
                url:this.SERVER+'/announcements/newests',
                params:{
                    count:5
                },
                headers:{
                    'Content-Type':'multipart/form-data',
                    'Authorization':'bearer'+localStorage.getItem('Access-Token')
                }
            }).then(
                function(response){
                    var res=response.parseJSON()
                    this.anouncements=res['data']
                }
            ).catch({
                function(response){
                    console.log(response)
                }
            })
        },
        getComInfo(id){
            this.$axios({
                method:'get',
                url:this.SERVER+'/communities/this',
                headers:{
                    'Content-Type':'multipart/form-data',
                    'Authorization':'bearer'+localStorage.getItem('Access-Token')
                }
            }).then(
                function(response){
                    var result=response.parseJSON()
                    var attachments=result['attachments']
                    for(var i in attachments){
                        this.pics.push(attachments[i]['attachmentUrl'])
                    }
                }
            ).catch({
                
            })
        }
    },
    mounted(){
        // this.getComInfo()
        // this.getAnnouncements()
    }
}
</script>



